<template>
    <v-app>
        <v-container>
            <!-- 添加标签表单 -->
            <v-row>
                <v-col>
                    <v-card class="pa-3">
                        <v-card-title>添加城市标签</v-card-title>
                        <v-card-text>
                            <v-form @submit.prevent="addNewTag">
                                <v-text-field
                                    v-model="newTag.name"
                                    label="城市名称，列如：四川省，成都市，杭州市。(添加省保存后将会自动添加省下面所有城市)"
                                    required
                                ></v-text-field>
                                <v-select
                                    v-model="newTag.spec"
                                    :items="specs"
                                    label="选择类型"
                                    required
                                ></v-select>
                                <v-text-field
                                    v-model="newTag.price"
                                    label="价格（多少金币）"
                                    type="number"
                                    required
                                ></v-text-field>
                                <v-btn color="primary" type="submit">添加标签</v-btn>
                                <v-btn color="primary" @click="save" :loading="saving">保存设置</v-btn>
                            </v-form>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>

            <!-- 默认商品标签列表 -->
            <v-row>
                <v-col>
                    <v-card class="pa-3 mt-3">
                        <v-card-title>默认城市标签（订单城市未匹配的话以默认类型为主）</v-card-title>
                        <v-card-text>
                            <v-simple-table>
                                <template v-slot:default>
                                    <thead>
                                    <tr>
                                        <th class="text-left">名称</th>
                                        <th class="text-left">类型</th>
                                        <th class="text-left">价格</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(tag, index) in defaultTags" :key="index">
                                        <td>{{ tag.name }}</td>
                                        <td>{{ tag.spec }}</td>
                                        <td>
                                            <v-text-field
                                                v-model="tag.price"
                                                type="number"
                                                hide-details
                                            ></v-text-field>
                                        </td>
                                    </tr>
                                    </tbody>
                                </template>
                            </v-simple-table>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>

            <!-- 新添加的商品标签列表 -->
            <v-row>
                <v-col>
                    <v-card class="pa-3 mt-3">
                        <v-card-title>城市标签</v-card-title>
                        <v-card-text>
                            <v-simple-table>
                                <template v-slot:default>
                                    <thead>
                                    <tr>
                                        <th class="text-left">名称</th>
                                        <th class="text-left">类型</th>
                                        <th class="text-left">价格</th>
                                        <th class="text-left">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="(tag, index) in addedTags" :key="tag.id">
                                        <td>{{ tag.name }}</td>
                                        <td>{{ tag.spec }}</td>
                                        <td>{{ tag.price }}</td>
                                        <td>
                                            <v-btn
                                                icon
                                                @click="removeTag(tag.id)"
                                            >
                                                <v-icon>mdi-delete</v-icon>
                                            </v-btn>
                                        </td>
                                    </tr>
                                    </tbody>
                                </template>
                            </v-simple-table>
                        </v-card-text>
                    </v-card>
                </v-col>
            </v-row>
        </v-container>
    </v-app>
</template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            saving: false,
            // 新标签的初始数据
            newTag: {
                name: '',
                price: 0,
                spec: null,
                id: null
            },
            // 预设的规格选项
            specs: ['车贷', '综合', '公积金'],
            // 默认的商品标签
            defaultTags: [],
            // 用户添加的商品标签
            addedTags: [],
            // 用来生成唯一ID的计数器
            tagIdCounter: 1
        };
    },
    created() {
        this.load();
        this.getLoanType();
    },
    methods: {
        getLoanType() {
            axios.get(`/app/loan_type/get`).then((response) => {
                if(response.data.code == 0) {
                    this.specs = response.data.data ?  response.data.data : [];
                }
            });
        },

        save() {
            this.saving = true;
            const that = this;
            axios.post(`/app/setting_city/ticket`, { addedTags: this.addedTags, defaultTags: this.defaultTags}).then((response) => {
                this.$toast.open({
                    message: response.data.msg,
                    type: response.data.code == 0 ? 'success' : 'error',
                    position: 'top-right',
                });
                this.load();
            })
            .catch(function () {})
            .then(function () {
                that.saving = false;
            });
        },
        load() {
            axios.get(`/app/setting_city/ticket`).then((response) => {
                if(response.data.code == 0) {
                    this.addedTags = response.data.data ?  response.data.data.addedTags : [];
                    this.defaultTags = response.data.data ?  response.data.data.defaultTags : [];
                    this.tagIdCounter = response.data.data ?  response.data.data.tagIdCounter : 1;

                }
            })
                .catch(function () {})
                .then(function () {
                });
        },
        // 添加新标签的方法
        addNewTag() {
            if (this.newTag.name && this.newTag.price !== 0 && this.newTag.spec) {
                const newTagData = {
                    ...this.newTag,
                    id: this.tagIdCounter++
                };
                this.addedTags.push(newTagData);
                // 重置新标签的表单数据
                // this.newTag = { name: '', price: 0, spec: null };
                this.newTag.price = 0;
                this.newTag.spec = null;
            } else {
                alert('所有字段都是必填项！');
            }
        },
        // 删除添加的标签
        removeTag(tagId) {
            this.addedTags = this.addedTags.filter(tag => tag.id !== tagId);
        }
    },
};
</script>

<style>
/* 样式可以根据需要添加 */
</style>
